WebSim Sound Effects Library

A collection of programmatically generated sound effects for your web projects

UI Sounds

Simple Beep

function playBeep() {
  const audioContext = new (window.AudioContext || window.webkitAudioContext)();
  const oscillator = audioContext.createOscillator();
  const gainNode = audioContext.createGain();
  
  oscillator.connect(gainNode);
  gainNode.connect(audioContext.destination);
  
  oscillator.type = 'sine';
  oscillator.frequency.value = 440;
  gainNode.gain.value = 0.1;
  
  oscillator.start();
  setTimeout(() => oscillator.stop(), 100);
}

Notification

function playNotification() {
  const audioContext = new (window.AudioContext || window.webkitAudioContext)();
  const oscillator = audioContext.createOscillator();
  const gainNode = audioContext.createGain();
  
  oscillator.connect(gainNode);
  gainNode.connect(audioContext.destination);
  
  oscillator.type = 'sine';
  oscillator.frequency.setValueAtTime(587.33, audioContext.currentTime);
  oscillator.frequency.setValueAtTime(880, audioContext.currentTime + 0.1);
  
  gainNode.gain.setValueAtTime(0.1, audioContext.currentTime);
  gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.2);
  
  oscillator.start();
  setTimeout(() => oscillator.stop(), 200);
}

Error Alert

function playError() {
  const audioContext = new (window.AudioContext || window.webkitAudioContext)();
  const oscillator = audioContext.createOscillator();
  const gainNode = audioContext.createGain();
  
  oscillator.connect(gainNode);
  gainNode.connect(audioContext.destination);
  
  oscillator.type = 'square';
  oscillator.frequency.setValueAtTime(220, audioContext.currentTime);
  oscillator.frequency.setValueAtTime(196, audioContext.currentTime + 0.1);
  
  gainNode.gain.setValueAtTime(0.1, audioContext.currentTime);
  
  oscillator.start();
  setTimeout(() => oscillator.stop(), 200);
}

Menu Select

Game Effects

Jump Effect

function playJump() {
  const audioContext = new (window.AudioContext || window.webkitAudioContext)();
  const oscillator = audioContext.createOscillator();
  const gainNode = audioContext.createGain();
  
  oscillator.connect(gainNode);
  gainNode.connect(audioContext.destination);
  
  oscillator.type = 'sine';
  oscillator.frequency.setValueAtTime(150, audioContext.currentTime);
  oscillator.frequency.exponentialRampToValueAtTime(500, audioContext.currentTime + 0.1);
  
  gainNode.gain.setValueAtTime(0.1, audioContext.currentTime);
  gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.1);
  
  oscillator.start();
  setTimeout(() => oscillator.stop(), 100);
}

Coin Collect

function playCoin() {
  const audioContext = new (window.AudioContext || window.webkitAudioContext)();
  const oscillator = audioContext.createOscillator();
  const gainNode = audioContext.createGain();
  
  oscillator.connect(gainNode);
  gainNode.connect(audioContext.destination);
  
  oscillator.type = 'sine';
  oscillator.frequency.setValueAtTime(987.77, audioContext.currentTime);
  oscillator.frequency.setValueAtTime(1318.51, audioContext.currentTime + 0.1);
  
  gainNode.gain.setValueAtTime(0.1, audioContext.currentTime);
  gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.2);
  
  oscillator.start();
  setTimeout(() => oscillator.stop(), 200);
}

Power Up

function playPowerUp() {
  const audioContext = new (window.AudioContext || window.webkitAudioContext)();
  const oscillator = audioContext.createOscillator();
  const gainNode = audioContext.createGain();
  
  oscillator.connect(gainNode);
  gainNode.connect(audioContext.destination);
  
  oscillator.type = 'sine';
  oscillator.frequency.setValueAtTime(220, audioContext.currentTime);
  oscillator.frequency.linearRampToValueAtTime(660, audioContext.currentTime + 0.2);
  
  gainNode.gain.setValueAtTime(0.1, audioContext.currentTime);
  gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.3);
  
  oscillator.start();
  setTimeout(() => oscillator.stop(), 300);
}

Hit/Impact

function playHit() {
  const audioContext = new (window.AudioContext || window.webkitAudioContext)();
  const oscillator = audioContext.createOscillator();
  const gainNode = audioContext.createGain();
  
  oscillator.connect(gainNode);
  gainNode.connect(audioContext.destination);
  
  oscillator.type = 'square';
  oscillator.frequency.setValueAtTime(150, audioContext.currentTime);
  gainNode.gain.setValueAtTime(0.2, audioContext.currentTime);
  gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.05);
  
  oscillator.start();
  setTimeout(() => oscillator.stop(), 50);
}

Level Complete

function playLevelComplete() {
  const audioContext = new (window.AudioContext || window.webkitAudioContext)();
  const oscillator = audioContext.createOscillator();
  const gainNode = audioContext.createGain();
  
  oscillator.connect(gainNode);
  gainNode.connect(audioContext.destination);
  
  oscillator.type = 'sine';
  oscillator.frequency.setValueAtTime(523.25, audioContext.currentTime); // C5
  oscillator.frequency.setValueAtTime(659.25, audioContext.currentTime + 0.1); // E5
  oscillator.frequency.setValueAtTime(783.99, audioContext.currentTime + 0.2); // G5
  
  gainNode.gain.setValueAtTime(0.1, audioContext.currentTime);
  gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.3);
  
  oscillator.start();
  setTimeout(() => oscillator.stop(), 300);
}

Combat Effects

Laser Blast

function playLaser() {
  const audioContext = new (window.AudioContext || window.webkitAudioContext)();
  const oscillator = audioContext.createOscillator();
  const gainNode = audioContext.createGain();
  
  oscillator.connect(gainNode);
  gainNode.connect(audioContext.destination);
  
  oscillator.type = 'square';
  oscillator.frequency.setValueAtTime(880, audioContext.currentTime);
  oscillator.frequency.exponentialRampToValueAtTime(110, audioContext.currentTime + 0.1);
  
  gainNode.gain.setValueAtTime(0.1, audioContext.currentTime);
  gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.1);
  
  oscillator.start();
  setTimeout(() => oscillator.stop(), 100);
}

Explosion Effect

function playExplosion() {
  const audioContext = new (window.AudioContext || window.webkitAudioContext)();
  const bufferSize = audioContext.sampleRate * 1;
  const buffer = audioContext.createBuffer(1, bufferSize, audioContext.sampleRate);
  const data = buffer.getChannelData(0);
  
  for (let i = 0; i < bufferSize; i++) {
    data[i] = Math.random() * 2 - 1;
    data[i] *= (1 - i / bufferSize);
  }
  
  const source = audioContext.createBufferSource();
  const gainNode = audioContext.createGain();
  
  source.buffer = buffer;
  source.connect(gainNode);
  gainNode.connect(audioContext.destination);
  
  gainNode.gain.value = 0.1;
  source.start();
}

Musical Effects

Quick Arpeggio

function playArpeggio() {
  const audioContext = new (window.AudioContext || window.webkitAudioContext)();
  const notes = [261.63, 329.63, 392.00, 523.25]; // C4, E4, G4, C5
  
  notes.forEach((freq, index) => {
    setTimeout(() => {
      const oscillator = audioContext.createOscillator();
      const gainNode = audioContext.createGain();
      
      oscillator.connect(gainNode);
      gainNode.connect(audioContext.destination);
      
      oscillator.type = 'sine';
      oscillator.frequency.value = freq;
      
      gainNode.gain.setValueAtTime(0.1, audioContext.currentTime);
      gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.1);
      
      oscillator.start();
      setTimeout(() => oscillator.stop(), 100);
    }, index * 100);
  });
}

Success Chime

function playSuccess() {
  const audioContext = new (window.AudioContext || window.webkitAudioContext)();
  const oscillator = audioContext.createOscillator();
  const gainNode = audioContext.createGain();
  
  oscillator.connect(gainNode);
  gainNode.connect(audioContext.destination);
  
  oscillator.type = 'sine';
  oscillator.frequency.setValueAtTime(523.25, audioContext.currentTime); // C5
  oscillator.frequency.setValueAtTime(659.25, audioContext.currentTime + 0.15); // E5
  
  gainNode.gain.setValueAtTime(0.1, audioContext.currentTime);
  gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.3);
  
  oscillator.start();
  setTimeout(() => oscillator.stop(), 300);
}

Christmas Song (2:30)

function playChristmasSong() {
  const audioContext = new (window.AudioContext || window.webkitAudioContext)();
  const now = audioContext.currentTime;
  
  const notes = {
    C4: 261.63, D4: 293.66, E4: 329.63, F4: 349.23,
    G4: 392.00, A4: 440.00, B4: 493.88, C5: 523.25
  };
  
  const masterGain = audioContext.createGain();
  masterGain.gain.value = 0.15;
  masterGain.connect(audioContext.destination);

  function playNote(frequency, startTime, duration) {
    const oscillator = audioContext.createOscillator();
    const gainNode = audioContext.createGain();
    
    oscillator.connect(gainNode);
    gainNode.connect(masterGain);
    
    oscillator.type = 'sine';
    oscillator.frequency.value = frequency;
    
    gainNode.gain.setValueAtTime(0.1, startTime);
    gainNode.gain.exponentialRampToValueAtTime(0.01, startTime + duration - 0.05);
    
    oscillator.start(startTime);
    oscillator.stop(startTime + duration);
  }

  function playChord(frequencies, startTime, duration) {
    frequencies.forEach(freq => playNote(freq, startTime, duration));
  }

  function playPattern(startTime) {
    const pattern = [
      {note: notes.E4, duration: 0.25},
      {note: notes.E4, duration: 0.25},
      {note: notes.E4, duration: 0.5},
      {note: notes.E4, duration: 0.25},
      {note: notes.E4, duration: 0.25},
      {note: notes.E4, duration: 0.5},
      {note: notes.E4, duration: 0.25},
      {note: notes.G4, duration: 0.25},
      {note: notes.C4, duration: 0.3},
      {note: notes.D4, duration: 0.2},
      {note: notes.E4, duration: 1}
    ];

    let currentTime = startTime;
    pattern.forEach(({note, duration}) => {
      playNote(note, currentTime, duration);
      currentTime += duration;
    });

    const chords = [
      {notes: [notes.C4, notes.E4, notes.G4], duration: 1},
      {notes: [notes.F4, notes.A4, notes.C5], duration: 1},
      {notes: [notes.G4, notes.B4, notes.D4], duration: 1}
    ];

    currentTime = startTime;
    chords.forEach(({notes, duration}) => {
      playChord(notes, currentTime, duration);
      currentTime += duration;
    });

    return currentTime - startTime;
  }

  let patternTime = 0;
  const totalDuration = 150; // 2:30 in seconds
  
  while (patternTime < totalDuration) {
    const duration = playPattern(now + patternTime);
    patternTime += duration;
  }

  const stopBtn = document.createElement('button');
  stopBtn.textContent = 'Stop Music';
  stopBtn.className = 'btn';
  stopBtn.style.marginLeft = '10px';
  stopBtn.onclick = () => {
    audioContext.close();
    stopBtn.remove();
  };
  
  document.querySelector('button[onclick="playChristmasSong()"]')
    .parentNode.appendChild(stopBtn);
}

Space Ambient (2:55)

function playSpaceAmbient() {
  const audioContext = new (window.AudioContext || window.webkitAudioContext)();
  const now = audioContext.currentTime;
  
  const masterGain = audioContext.createGain();
  masterGain.gain.value = 0.15;
  masterGain.connect(audioContext.destination);

  // Frequencies for space-themed notes (pentatonic scale)
  const spaceNotes = {
    G3: 196.00, A3: 220.00, C4: 261.63, D4: 293.66, E4: 329.63,
    G4: 392.00, A4: 440.00, C5: 523.25, D5: 587.33, E5: 659.25
  };

  function createPad(frequency, startTime, duration) {
    const oscillator = audioContext.createOscillator();
    const gainNode = audioContext.createGain();
    const filter = audioContext.createBiquadFilter();
    
    oscillator.connect(filter);
    filter.connect(gainNode);
    gainNode.connect(masterGain);
    
    oscillator.type = 'sine';
    oscillator.frequency.value = frequency;
    
    filter.type = 'lowpass';
    filter.frequency.value = 1000;
    filter.Q.value = 1;
    
    gainNode.gain.setValueAtTime(0, startTime);
    gainNode.gain.linearRampToValueAtTime(0.1, startTime + 2);
    gainNode.gain.setValueAtTime(0.1, startTime + duration - 2);
    gainNode.gain.linearRampToValueAtTime(0, startTime + duration);
    
    oscillator.start(startTime);
    oscillator.stop(startTime + duration);
  }

  function createShimmer(frequency, startTime) {
    const oscillator = audioContext.createOscillator();
    const gainNode = audioContext.createGain();
    
    oscillator.connect(gainNode);
    gainNode.connect(masterGain);
    
    oscillator.type = 'sine';
    oscillator.frequency.value = frequency;
    
    gainNode.gain.setValueAtTime(0, startTime);
    gainNode.gain.linearRampToValueAtTime(0.05, startTime + 0.5);
    gainNode.gain.linearRampToValueAtTime(0, startTime + 3);
    
    oscillator.start(startTime);
    oscillator.stop(startTime + 3);
  }

  // Create ambient base layers
  const padProgression = [
    {notes: [spaceNotes.G3, spaceNotes.C4, spaceNotes.E4], duration: 10},
    {notes: [spaceNotes.A3, spaceNotes.D4, spaceNotes.G4], duration: 10},
    {notes: [spaceNotes.C4, spaceNotes.E4, spaceNotes.A4], duration: 10},
    {notes: [spaceNotes.G3, spaceNotes.D4, spaceNotes.G4], duration: 10}
  ];

  let currentTime = now;
  const totalDuration = 175; // 2:55 in seconds

  while (currentTime < now + totalDuration) {
    padProgression.forEach(({notes, duration}) => {
      notes.forEach(note => createPad(note, currentTime, duration));
      currentTime += duration;
    });
  }

  // Add shimmering effects
  for (let i = 0; i < totalDuration; i += 4) {
    const randomNote = Object.values(spaceNotes)[Math.floor(Math.random() * Object.keys(spaceNotes).length)];
    createShimmer(randomNote * 2, now + i);
  }

  const stopBtn = document.createElement('button');
  stopBtn.textContent = 'Stop Music';
  stopBtn.className = 'btn';
  stopBtn.style.marginLeft = '10px';
  stopBtn.onclick = () => {
    audioContext.close();
    stopBtn.remove();
  };
  
  document.querySelector('button[onclick="playSpaceAmbient()"]')
    .parentNode.appendChild(stopBtn);
}

Environmental Effects

Wind Effect

function playWind() {
  const audioContext = new (window.AudioContext || window.webkitAudioContext)();
  const bufferSize = audioContext.sampleRate * 2;
  const buffer = audioContext.createBuffer(1, bufferSize, audioContext.sampleRate);
  const data = buffer.getChannelData(0);
  
  for (let i = 0; i < bufferSize; i++) {
    data[i] = Math.sin(i * 0.01) * Math.random() * 0.5;
  }
  
  const source = audioContext.createBufferSource();
  const gainNode = audioContext.createGain();
  const filter = audioContext.createBiquadFilter();
  
  source.buffer = buffer;
  source.connect(filter);
  filter.connect(gainNode);
  gainNode.connect(audioContext.destination);
  
  filter.type = 'bandpass';
  filter.frequency.value = 400;
  filter.Q.value = 0.5;
  
  gainNode.gain.value = 0.1;
  source.start();
}

Rain Effect

function playRain() {
  const audioContext = new (window.AudioContext || window.webkitAudioContext)();
  const bufferSize = audioContext.sampleRate * 2;
  const buffer = audioContext.createBuffer(1, bufferSize, audioContext.sampleRate);
  const data = buffer.getChannelData(0);
  
  for (let i = 0; i < bufferSize; i++) {
    data[i] = Math.random() * 0.2;
  }
  
  const source = audioContext.createBufferSource();
  const gainNode = audioContext.createGain();
  const filter = audioContext.createBiquadFilter();
  
  source.buffer = buffer;
  source.connect(filter);
  filter.connect(gainNode);
  gainNode.connect(audioContext.destination);
  
  filter.type = 'highpass';
  filter.frequency.value = 1000;
  
  gainNode.gain.value = 0.1;
  source.start();
}

Thunder Crack

function playThunder() {
  const audioContext = new (window.AudioContext || window.webkitAudioContext)();
  const bufferSize = audioContext.sampleRate * 2;
  const buffer = audioContext.createBuffer(1, bufferSize, audioContext.sampleRate);
  const data = buffer.getChannelData(0);
  
  for (let i = 0; i < bufferSize; i++) {
    data[i] = Math.random() * Math.exp(-i / (audioContext.sampleRate * 0.2));
  }
  
  const source = audioContext.createBufferSource();
  const gainNode = audioContext.createGain();
  const filter = audioContext.createBiquadFilter();
  
  source.buffer = buffer;
  source.connect(filter);
  filter.connect(gainNode);
  gainNode.connect(audioContext.destination);
  
  filter.type = 'lowpass';
  filter.frequency.value = 100;
  
  gainNode.gain.value = 0.15;
  source.start();
}